<template>
  <div class="app-container">
    <el-card class="m-t-15 el-card-dict">
      <div slot="header" class="flex-cls-nowrap-spc-btw">
        <span>角色配置</span>
      </div>
      <tree-transfer
        :title="['全部权限','已有权限']"
        :from_data="fromData"
        :to_data="toData"
        :default-props="{label:'label'}"
        :mode="mode"
        height="540px"
        filter
        open-all
        @add-btn="add"
        @remove-btn="remove"
      />
    </el-card>
  </div>
</template>
<script>

import treeTransfer from "el-tree-transfer";
export default {
  name: "RoleRule",
  components: {
    treeTransfer
  },
  data() {
    return {
      mode: "transfer", // transfer addressList
      fromData: [
        {
          id: "1",
          pid: 0,
          label: "人事管理",
          children: [
            {
              id: "1-1",
              pid: "1",
              label: "员工信息管理"
            },
            {
              id: "1-2",
              pid: "1",
              label: "员工信息分析"
            }
          ]
        }
      ],
      toData: [
        {
          id: "2",
          pid: 0,
          label: "人事管理2",
          children: [
            {
              id: "2-1",
              pid: "2",
              label: "员工信息管理2"
            },
            {
              id: "2-2",
              pid: "2",
              label: "员工信息分析2"
            }
          ]
        }
      ]
    };
  },
  methods: {
    // 监听穿梭框组件添加
    add(fromData, toData, obj) {
      let ids = [];
      ids = this.getToDataID(toData, ids);
      // 树组件以配置权限所有id
      console.log(ids, "ids");
    },
    // 监听穿梭框组件移除
    remove(fromData, toData, obj) {
      let ids = [];
      ids = this.getToDataID(toData, ids);
      // 树组件以配置权限所有id
      console.log("obj:", ids);
    },
    // 递归获取树组件的所有 id
    getToDataID(toData, ids) {
      if (toData.length) {
        toData.forEach(item => {
          ids.push(item.id);
          if (item?.children?.length) {
            this.getToDataID(item.children, ids);
          }
        });
        return ids;
      }
      return [];
    }
  }
};
</script>

